import React from 'react';
import {useHistory} from 'react-router-dom';

import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

import {request} from '../../../../request';

function Index(props) {
    const history = useHistory();
    const { id, introduction, userImg } = props

    //打开某个日记
    const handleView = () => {
        history.push(`/details/${id}`)
    }

    //处理删除某个日记
    const handleDelete = () => {
        request({
          url: `/journal/delete/${id}`,
          method: 'POST'
        }).then(res => {
            //将服务器传回的数据回传到父组件
            props.delete(res.msg);
        })
    }

    return (
        <Grid item xs={12} sm={6} md={4}>
            <Card
                sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}
            >
                <CardMedia
                    component="img"
                    sx={{
                        // 16:9
                        pt: '56.25%',
                    }}
                    image={userImg}
                    alt="random"
                />
                <CardContent sx={{ flexGrow: 1 }}>
                    <Typography>
                        {introduction}
                    </Typography>
                </CardContent>
                <CardActions>
                    <Button size="small" onClick={handleView}>View</Button>
                    <Button size="small" onClick={handleDelete}>Delete</Button>
                </CardActions>
            </Card>
        </Grid>
    );
}

export default Index;